<!-- 登录页 -->
<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-text"></div>
      <div class="login-qrcode">
        <a-form v-bind="{
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
          }">
          <a-form-item label="账号">
            <a-input placeholder="请输入账号" v-model="loginForm.phone_number">
              <a-icon slot="prefix-icon" type="user" />
            </a-input>
          </a-form-item>
          <a-form-item label="密码">
            <a-input type="password" placeholder="请输入密码" v-model="loginForm.password">
              <a-icon slot="prefix-icon" type="lock" />
            </a-input>
          </a-form-item>
          <a-form-item label="图形验证码">
            <a-row :gutter="8">
              <a-col :span="8">
                <a-input placeholder="请输入验证码" v-model="ValidCodeValue" :maxLength="6" @keyup.enter="handleLogin" />
              </a-col>
              <a-col :span="16" style="texa-align:center;">
                <ValidCode ref="ValidCode" @click="$refs.ValidCode.refreshCode()" />
              </a-col>
            </a-row>
          </a-form-item>
          <a-row :gutter="8">
            <a-col :span="8" :offset="6">
              <a-checkbox v-model="remember_password">记住密码</a-checkbox>
            </a-col>
            <a-col :span="8">
              <div class="forgea-password" @click="handleForgetPassword">忘记密码</div>
            </a-col>
          </a-row>
          <a-button class="login-btn" :loading="loading" @click="handleLogin">登录</a-button>
        </a-form>
      </div>
    </div>
    <!-- 入口 -->
    <a-space class="statistic-page-url">
      <a-button class="url-item" @click="navigateToLogin" type="primary" shape="round" icon="user">投稿系统</a-button>
    </a-space>
  </div>
</template>

<script>
  import ValidCode from './ValidCode.vue'

  import {
    apiDestinationLogin
  } from '@/api/featch'

  import {
    Base64
  } from '@/assets/js/base64'

  export default {
    name: 'login',
    components: {
      ValidCode
    },
    data() {
      return {
        // 表单
        loginForm: {
          // 账号
          phone_number: window.localStorage.getItem('phone_number') || '',
          // 密码
          password: window.localStorage.getItem('password') || '',
        },
        // 验证码
        ValidCodeValue: ``,
        // 记住密码
        remember_password: window.localStorage.getItem('remember_password') === 'true',
        // 登录
        loading: false,
      }
    },
    computed: {},
    mounted() {
      document.title = '缙云县融媒体中心 人员去向表'

      this.loginForm.phone_number = window.localStorage.getItem('phone_number') || ''
      // 检查是否记住密码
      const rememberPassword = window.localStorage.getItem('remember_password')
      if (rememberPassword === 'true') {
        this.remember_password = true
        this.loginForm.phone_number = window.localStorage.getItem('phone_number') || ''
        this.loginForm.password = window.localStorage.getItem('password') || ''
      } else {
        // 如果没有记住密码，清除所有存储的登录信息
        this.remember_password = false
        this.loginForm.password = ''
        window.localStorage.removeItem('password')
        window.localStorage.removeItem('remember_password')
      }
    },
    methods: {
      /**
       * @description 登录
       */
      handleLogin() {
        if (!this.loginForm.phone_number) {
          this.$message.warning('请输入账号')
          return
        }
        if (!this.loginForm.password) {
          this.$message.warning('请输入密码')
          return
        }

        let code = this.$refs.ValidCode.codeList.map(item => {
          return item.code
        })
        code = code.join('').toLowerCase()

        if (code != this.ValidCodeValue) {
          this.$message.warning('验证码错误')
          this.$refs.ValidCode.refreshCode()
          return
        }
        this.loading = true
        const form = {
          phone_number: this.loginForm.phone_number,
          password: Base64.encode(this.loginForm.password),
        }
        apiDestinationLogin(form)
          .then(res => {
            this.loading = false
            console.log(res)
            res = res.data
            if (res.code === 200) {
              this.$message.success('登录成功')
              window.sessionStorage.setItem('token', res.data.token)
              window.sessionStorage.setItem('person_info', JSON.stringify(res.data.person_info))

              if (this.remember_password) {
                window.localStorage.setItem('remember_password', 'true')
                window.localStorage.setItem('phone_number', this.loginForm.phone_number)
                window.localStorage.setItem('password', this.loginForm.password)
              } else {
                window.localStorage.removeItem('remember_password')
                window.localStorage.removeItem('phone_number')
                window.localStorage.removeItem('password')
              }
              this.$router.push('/destination-main')
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error(err.toString())
          })
      },
      /**
       * @description 忘记密码
       */
      handleForgetPassword() {
        this.$message.warning('请联系管理员')
      },
      /**
       * @description 根据字段名获取url参数
       * @param {String} name -字段名
       * @returns {String} 字段值
       */
      getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
        var r = window.location.search.substr(1).match(reg) //获取url中"?"符后的字符串并正则匹配
        var context = ""
        if (r != null)
          context = r[2]
        reg = null
        r = null
        return context == null || context == "" || context == "undefined" ? "" : context
      },
      /**
       * @description 获取 = 后的字符串
       */
      getCaption(obj) {
        var index = obj.lastIndexOf("\=")
        if (index == -1) {
          return ''
        }
        obj = obj.substring(index + 1, obj.length)
        return obj
      },
      navigateToLogin() {
        this.$router.push({
          path: '/login'
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .login-container {
    height: 100vh;
    width: 100vw;
    position: relative;
    background-image: url('../../assets/img/main/login-container-1.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    .statistic-page-url {
      position: absolute;
      top: 20px;
      left: 20px;
      display: flex;
      flex-direction: column;

      .url-item {
        margin-top: 20px;
      }
    }

    .login-container-spin {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    .login-box {
      height: 80vh;
      width: 80vw;
      position: relative;
      background-image: url('../../assets/img/main/login-box-1.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      transform: translateX(10vw) translateY(10vh);
      border-radius: 20px;
      // box-shadow: 5px 5px 30px rgb(100, 100, 100);
      filter: drop-shadow(0px 15px 60px rgba(96, 0, 129, 0.8));

      .forgea-password {
        cursor: pointer;
      }

      .login-text {
        position: absolute;
        top: 15vh;
        right: 5vw;
        width: 30vw;
        height: 5vh;
        transform: scale(1.2);
        background-image: url('../../assets/img/main/login-text-1.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .login-qrcode {
        position: absolute;
        top: 25.5vh;
        right: 11vw;
        width: 20vw;
        // height: 20vw;
        overflow: hidden;

        .captcha-image {
          cursor: pointer;
          width: 100%;
          object-fit: contain;
          height: 40px;
        }

        .login-btn {
          width: 20vw;
          text-align: center;
          // margin-left: 2vw;
          border-radius: 100vw;
          margin-bottom: 2vw;
          margin-top: 2vw;
        }

        iframe {
          height: 100%;
          width: 100%;
          overflow: hidden;
        }
      }
    }
  }
</style>